<template>
  <div class="sign-in-container">
    <uv-popup ref="popup" round="15" bgColor="transparent">
      <view class="popMain positionRelative">
        <image src="https://cos.qcshejiao.com/qc/xcxui/ig/96734.png" mode="widthFix" />

        <view class="main">
          <view class="top flex justifyBetween alignCenter">
            <uv-image src="https://cos.qcshejiao.com/qc/xcxui/ig/86695.png" width="30px" mode="widthFix"></uv-image>
            <view class="flex alignCenter">
              <text class="fz12">签到提醒</text>
              <uv-switch v-model="signReminder" activeColor="#F24646" inactiveColor="#D5D5D5" size="22"></uv-switch>
            </view>
          </view>

          <view class="middle flex justifyBetween alignCenter">
            <view class="flex alignCenter">
              <uv-image src="https://cos.qcshejiao.com/qc/xcxui/ig/86664.png" width="50px" mode="widthFix"></uv-image>
              <text class="integral fz14">VIP可得双倍积分</text>
            </view>

            <uv-image v-if="counter.userInfo.isVip==2" src="https://cos.qcshejiao.com/qc/xcxui/ig/56863.png" width="90px" mode="widthFix"></uv-image>
            <uv-image v-else src="https://cos.qcshejiao.com/qc/xcxui/ig/53772.png" width="90px" mode="widthFix"></uv-image>
          </view>

          <view class="title flex alignCenter justifyCenter">
            <view class="name bold fz16">每日签到</view>
            <view class="continuity flex alignCenter fz14">已连续签到
              <text>{{signInNum}}</text>天
            </view>
          </view>

          <view class="grids" @click="save">
            <view class="grid-box textCenter fz12" v-for="(item,index) in dates" :key="index">
              <view :style="gridItemStyle(item)" class="grid-item">
                <view class="flex alignCenter justifyCenter">
                  <uv-image v-if="item.signedIn" src="https://cos.qcshejiao.com/qc/xcxui/ig/90874.png" width="100%" mode="widthFix"></uv-image>
                  <uv-image v-else src="https://cos.qcshejiao.com/qc/xcxui/ig/96491.png" width="100%" mode="widthFix"></uv-image>
                </view>
                <view class="flex justifyCenter" style="padding:10px 0">+20</view>
              </view>
              <view class="textCenter fz12 desc">{{item.signedIn? "已签" : "未签"}}</view>
            </view>
          </view>

          <view class="tips fz12">连续签到7天可获得，邀请机会和上架商品计划</view>
        </view>

        <!-- <view class="actionBtn">
          <uv-button text="立即签到" @click="save" :disabled="disabledFunc" color="#F55FA1" shape="circle" :loading="loading"></uv-button>
        </view> -->
      </view>
    </uv-popup>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

let loading = ref(false);
let dates = ref([]);
let signReminder = ref(false); //签到提醒

onMounted(() => {
  getInfo();
});

let signInNum = computed(() => {
  let amount = 0;
  dates.value.forEach((element) => {
    if (element.signedIn) amount++;
  });
  return amount;
});

let disabledFunc = computed(() => {
  let a = false;
  for (let index = 0; index < dates.value.length; index++) {
    const element = dates.value[index];
    if (element.date == proxy.$utils.dateTimeFormateFn(new Date())) {
      if (element.signedIn) a = true;
    }
  }
  return a;
});

function gridItemStyle(item) {
  if (item.signedIn) {
    return {
      background: "linear-gradient(to bottom, #50cbda, #afb1e8, #f3a4fb)",
    };
  } else {
    return { background: "#CDCDCD" };
  }
}

async function save() {
  try {
    loading.value = true;
    await proxy.$apis.signIn(counter.slParams.userInfo.userId);
    proxy.$utils.showToast("签到成功");
    getHistory();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

async function getInfo() {
  if (!counter.isLogin) return;
  //是否需要完善数据
  let ret = await proxy.$apis.isAuth();
  if (ret) {
    await proxy.$utils.showModal({
      content: "请完善个人信息",
      showCancel: false,
    });
    return proxy.$utils.toLink("/packagePages/my/editUserInfo");
  }
  let resp = await proxy.$apis.todaySignIn(counter.slParams.userInfo.userId);
  console.log("今天签到了吗", resp);
  if (resp) return;
  instance.refs.popup.open();
  getHistory();
}

async function getHistory() {
  dates.value = await proxy.$apis.historySignIn(
    counter.slParams.userInfo.userId,
    {
      startDate: proxy.$utils.dateTimeFormateFn(getDatesOfCurrentWeek()[0]),
      endDate: proxy.$utils.dateTimeFormateFn(getDatesOfCurrentWeek()[6]),
    }
  );
  console.log("dates.value", dates.value);
}

function getDatesOfCurrentWeek() {
  const today = new Date();
  const dayOfWeek = today.getDay(); // 0 表示星期日，6 表示星期六
  const startDate = new Date(today);
  startDate.setDate(today.getDate() - dayOfWeek + 1); // 设置为本周的第一天（星期一）

  const dates = [];
  for (let i = 0; i < 7; i++) {
    const date = new Date(startDate);
    date.setDate(startDate.getDate() + i);
    dates.push(new Date(date));
  }

  return dates;
}
</script>



<style lang="scss" scoped>
.popMain {
  width: 80vw;
  .main {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    padding: 15px;
    .top {
      text {
        color: #604d12;
        margin-right: 8px;
      }
    }
    .middle {
      padding: 7px 0;
      .integral {
        margin-left: 10px;
      }
    }
    .title {
      color: #1a1a1a;
      .continuity {
        color: #9b9898;
        margin-left: 15px;
        text {
          color: #f24646;
          padding: 0 3px;
        }
      }
    }
    .grids {
      grid-template-columns: repeat(7, minmax(0px, 1fr));
      gap: 10px 10px; //上下间距 左右间距
      margin-top: 8vw;
      color: #fff;
      .grid-box {
        .grid-item {
          border-radius: 20px;
          padding: 5px;
        }
        .desc {
          margin-top: 3px;
        }
      }
    }
    .tips {
      color: #fff;
      margin-top: 10px;
    }
  }
}
</style>